const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const DIST_PATH = path.resolve(__dirname, 'client/dist');
const TEMPLATE_HTML = path.resolve(__dirname, 'client/src/index.html');

let config = {
    // devtool: 'inline-source-map',
    entry: {
        index: './client/src/main.jsx',
        /* vendor: [
            'react',
            'react-dom',
            'antd',
            'fabric'
        ] */
    },
    output: {
        path: DIST_PATH,
        filename: 'js/[name].js'
    },
    resolve: {
        extensions: ['.js', 'jsx']
    }
};

config.module = {
    rules: [{
        test: /\.js|.jsx$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader'
        }
    }, {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
    }, {
        test: /\.less$/,
        use: [
            { loader: 'style-loader' },
            { loader: 'css-loader' },
            {
                loader: "postcss-loader",
                options: {
                plugins: [
                    require('autoprefixer')({
                    browsers: ['last 5 version']
                    })
                ]
                }
            },
            { loader: 'less-loader', options: { javascriptEnabled: true } },
        ],
        include: [/antd/]
    }, {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              localIdentName: '[name]__[local]--[hash:base64:5]',
            },
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: [
                require('autoprefixer')({
                  browsers: ['last 5 version']
                })
              ]
            }
          },
          { loader: 'less-loader', options: { javascriptEnabled: true } },
        ],
        exclude: [/antd/]
    }, {
        test: /\.(scss|sass)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
    },/* , {
        test: /\.(scss|sass|css)$/,
        use: [
            {loader: 'style-loader'},
            {loader: 'css-loader'},
            {loader: 'postcss-loader'},
            {loader: 'less-loader'}
        ]
    },  */{
        test: /\.(png|jpg|jpng|eot|ttf)$/,
        use: {
            loader: 'url-loader',
            /* options: {
                limit: 1024
            } */
        }
    }]
};

config.optimization = {
    // sideEffects: false,
    // splitChunks: false,
    splitChunks: {
        cacheGroups: {
            /* vendor: {
                chunks: 'all',
                minChunks: 2,
                maxInitialRequests: 5,
                name: 'vendor',
                filename: 'js/vendor.bundle.js'
            } */
            vendor: {
                chunks: 'initial',
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                name: 'vendor',
                filename: 'js/vendor.bundle.js'
            },
            default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
        }
    },
    // minimize: false,
    // runtimeChunk: true,
    minimizer: [
        new TerserPlugin({

        })
    ]
};

config.devServer = {
    contentBase: path.resolve(__dirname,'client/dist'),
    port: '9999',
    compress: true,
    hot: true,
    https: false,
    noInfo: false,
    open: true,
    inline: true,
    proxy: {}
};

config.resolve = {
/*     alias: {
        fabric: path.resolve(__dirname, "client/src/js/fabric.js")
    } */
};

config.plugins = [
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin([DIST_PATH]),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        /* minify: {
            collapseWhitespace: true
        }, */
        minify:
            process.env.NODE_ENV === 'production'
                ? {
                        removeComments: true,
                        collapseWhitespace: true,
                        removeRedundantAttributes: true,
                        useShortDoctype: true,
                        removeEmptyAttributes: true,
                        removeStyleLinkTypeAttributes: true,
                        keepClosingSlash: true,
                        minifyJS: true,
                        minifyCSS: true,
                        minifyURLs: true
                    }
                : {},
        hash: true,
        title: 'TEST',
        template: TEMPLATE_HTML
    }),
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename:
            process.env.NODE_ENV !== 'production'
                ? 'static/css/[name].css'
                : 'static/css/[name].[hash].css',
        chunkFilename:
            process.env.NODE_ENV !== 'production'
                ? 'static/css/[id].css'
                : 'static/css/[id].[hash].css'
    }),
    new ExtractTextPlugin('css/index.css'),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    }),
    new webpack.ProvidePlugin({
        antd: 'antd'
    })
/*     new webpack.ProvidePlugin({
        $: 'fabric'
    }) */
];

module.exports = config;